extends ../layout

block content
  .container.artlist-box
    .row
      table.table.table-hover
        thead
          tr
            th 类别
            th 组件标题
            th 组件功能描述
            th 查看
            th 删除
            //- th 群发
        tbody
          each item in components
            tr(class="item-id-#{item._id}")
              td 
                if item.category
                  | #{item.category.name}
              td #{item.title}
              td #{item.description}
              td: a(target="_blank",data-toggle="modal",data-target="#editModal",data-whatever="#{item._id}") 查看
              td
                button.btn.btn-danger.del(type="button", data-id="#{item._id}") 删除
      nav(aria-label="...")
        a.btn.btn-primary(href="#",data-toggle="modal",data-target="#editModal") 新增
  .modal.fade#editModal(tabindex="-1",role="dialog",aria-labelledby="myModalLabel")
    .modal-dialog(role="document")
      .modal-content
        .modal-header
          button.close(type="button",data-dismiss="modal",aria-label="Close")
            span(aria-hidden="true") &times;
          h4.modal-title#myModalLabel 编辑组件信息
        .modal-body
          form(action="")
            .form-group
              label(for="categoryName") 分类名
              input.form-control#categoryName(type="text",placeholder="分类名",name="categoryName")
            .form-group
              label(for="category") 分类选择
              select.form-control#category(name="category")
                each cat in categories
                    option(value=cat._id) #{cat.name}
            .form-group
              label(for="title") 组件名
              input.form-control#title(type="text",placeholder="组件名")
            .form-group
              label(for="description") 组件功能描述
              textarea.form-control#description(type="text",placeholder="组件名",rows="3")
            .form-group
              label(for="htmlEngine") 组件模板
              textarea.form-control#htmlEngine(type="text",placeholder="组件模板",rows="6")
            .form-group
              label(for="btnoption") 配置按钮(数据格式:[{'按钮名':[{'配置1':'类名'},{'配置1':'类名'}]}])
              textarea.form-control#btnoption(type="text",placeholder="按钮配置",rows="6")
            .form-group.hide
              label(for="title") pid
              input.form-control#pid(type="hidden",placeholder="组件名")
        .modal-footer
          button.btn.btn-default(type="button",data-dismiss="modal") 取消
          button.btn.btn-primary#save(type="button") 保存
  script.
    $(function(){
      $('.del').click(function(e) {
        var target = $(e.target)
        var id = target.data('id')
        var tr = $('.item-id-' + id)

        $.ajax({
          type: 'DELETE',
          url: '/admin/dragmanage?id=' + id
        })
        .done(function(results) {
          if (results.success === true) {
            window.location.reload();
          }
        })
      });
      $('#save').click(function(e) {
        var data = {
          categoryName: $("#categoryName").val(),
          title: $("#title").val(),
          description: $("#description").val(),
          htmlEngine: $("#htmlEngine").val(),
          btnoption: $("#btnoption").val()
        };
        $("#category").val() && (data.category = $("#category").val())
        $("#pid").val() && (data._id = $("#pid").val())
        $.ajax({
          type: 'post',
          url: '/admin/dragmanage',
          data:data
        })
        .done(function(results) {
          if (results.success) {
            window.location.reload();
          }
        })
      });
      $('#editModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('whatever');
        var modal = $(this);
        if(recipient){
          modal.find('.modal-body #pid').val(recipient);
          $.ajax({
           type: 'post',
            url: '/admin/dragmanage/detail',
            data:{
              id: recipient
            }
          })
          .done(function(results) {
            if (results.success) {
              var data = results.component;
              $("#category").val(data.category);
              $("#title").val(data.title);
              $("#description").val(data.description);
              $("#htmlEngine").val(data.htmlEngine);
              $("#btnoption").val(data.btnoption);
            }
          })
        }
      })
    })